<!-- 我的---------设置 -->

<template>
	<view class="list">
		<view class="listItem">
			<text>更改手机号码</text>
			<view class="arrows-box">
				<image class="arrow-icon" src="/static/arrow-right.png" style="width: 30rpx; height:30rpx;"></image>
			</view>
		</view>
		<view class="listItem" @click="toChangePassword()">
			<text>修改密码</text>
			<view class="arrows-box">
				<image class="arrow-icon" src="/static/arrow-right.png" style="width: 30rpx; height:30rpx;"></image>
			</view>
		</view>
		<view class="listItem">
			<text>消息通知</text>
			<view class="arrows-box">
				<image class="arrow-icon" src="/static/arrow-right.png" style="width: 30rpx; height:30rpx;"></image>
			</view>
		</view>
		<view class="listItem">
			<text>清除缓存</text>
			<view class="arrows-box">
				<text>6.2M</text>
				<image class="arrow-icon" src="/static/arrow-right.png" style="width: 30rpx; height:30rpx;"></image>
			</view>
		</view>
		<view class="listItem">
			<text>升级版本</text>
			<view class="arrows-box">
				<text>当前版本 2.8.9</text>
				<image class="arrow-icon" src="/static/arrow-right.png" style="width: 30rpx; height:30rpx;"></image>
			</view>
		</view>
		<view class="listItem">
			<text>关于我们</text>
			<view class="arrows-box">
				<image class="arrow-icon" src="/static/arrow-right.png" style="width: 30rpx; height:30rpx;"></image>
			</view>
		</view>
		<view class="listItem-btn">
			<button @click="open">退出账号</button>
		</view>
	</view>
</template>

<script setup>
	//点击修改跳转到修改密码页面
	function toChangePassword() {
		uni.navigateTo({
			url: '/minepackge/pages/mine-Changepassword/mine-Changepassword'
		})
	}
	//点击退出账号打开弹窗  退出成功回到首页
	const open = () => {
		uni.showModal({
			content: '确定要退出当前账号?',
			success: (res) => {
				if (res.confirm) {
					console.log('用户确认退出');
					uni.navigateTo({
						url: '/pages/login/login'
					})
				} else if (res.cancel) {
					console.log('用户取消退出');
				}
			}
		});
	};
</script>

<style lang="scss" scoped>
	.list {
		background: #fff;
		padding: 0 40rpx;
		padding-bottom: 60rpx;
	}

	.listItem {
		height: 90rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #eee;
	}

	.arrows-box {
		display: flex;
		align-items: center;
		margin: 10rpx;
	}

	.arrow-icon {
		width: 30rpx;
		height: 30rpx;
	}

	.listItem-btn {
		margin-top: 40rpx;

		button {
			background-color: #fff;
			color: #006EF1;
			border: none;
		}
	}
</style>